import React, { Component } from 'react';
import Swiper from 'react-native-swiper';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  Dimensions,
  TouchableOpacity,
  Alert,
  ScrollView,
  Image,
} from 'react-native';
import AntDesignIcon from 'react-native-vector-icons/AntDesign';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { mtTypeData } from './data';
import Floor from './Floor';

const { width } = Dimensions.get('window');

export default class Find extends Component {
  static navigationOptions = {
    header: null,
  }
  state = {
    data: {}
  }
  async componentDidMount() {
    const res = await fetch('https://easy-mock.com/mock/5b7eaa36870d416df881a430/system/getHome');
    const resJson = await res.json();
    this.setState({ data: resJson.data });
  }
  handleCity = () => {
    Alert.alert('选择城市');
  }
  handleSound = () => {
    Alert.alert('点击通知');
  }
  handleScan = () => {
    Alert.alert('点击扫描');
  }
  renderSwiper = (pageDataArr = []) => {
    return pageDataArr.map((item, index) => {
      return (
        <TouchableOpacity
          key={index.toString()}
          activeOpacity={.5}
          onPress={() => { this.props.navigation.push('findDetail', {
            title: item.title,
            detailUrl: item.url
          }) }}
          style={styles.pageSwiperStyle}
        >
          <View
            style={{
              backgroundColor: item.bgColor,
              width: 30,
              height: 30,
              borderRadius: 30,
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            <MaterialCommunityIcons size={18} name={item.iconName} color="#fff" />
          </View>
          <Text style={styles.pageItemTitle}>{item.title}</Text>
        </TouchableOpacity>
      );
    })
  }
  renderCatogory = () => {
    const { data: { category = [] } } = this.state;
    return category.map(item => {
      return (
        <View key={item.mallCategoryId} style={styles.categoryItem}>
          <Image style={{width: 50, height: 50}} source={{ uri: item.image }} />
          <Text style={styles.categoryItemTitle}>{item.mallCategoryName}</Text>
        </View>
      )
    })
  }
  render() {
    const { data: { advertesPicture = {}, floor1 = [], floor2 = [], floor3 = [] } } = this.state;
    console.log(66, this.state.data);
    return (
      <View style={styles.findPage}>
        <View style={styles.navigatorTitle}>
          <TouchableOpacity activeOpacity={0.5} onPress={this.handleCity}>
            <Text style={styles.leftText}>杭州</Text>
          </TouchableOpacity>
          <TextInput
            style={styles.textInput}
            // clearButtonMode
            placeholder="请输入商品、商家、品类"
            maxLength={40}
          />
          <View style={styles.rightIcon}>
            <TouchableOpacity activeOpacity={0.5} onPress={this.handleSound}>
              <AntDesignIcon name="sound" size={20} style={{ marginRight: 10 }} color="#fff" />
            </TouchableOpacity>
            <TouchableOpacity activeOpacity={0.5} onPress={this.handleScan}>
              <AntDesignIcon name="scan1" size={20} color="#fff" />
            </TouchableOpacity>
          </View>
        </View>
        <ScrollView contentContainerStyle={styles.findScrollView}>
          <View style={styles.loopBox}>
            <Swiper
              autoplay={false}
              paginationStyle={styles.dotStyle}
              loop={false}
            >
              <View style={styles.pageViewBox}>{this.renderSwiper(mtTypeData.firstPage)}</View>
              <View style={styles.pageViewBox}>{this.renderSwiper(mtTypeData.secondPage)}</View>
            </Swiper>
          </View>
          <ScrollView contentContainerStyle={styles.categoryScrollView} horizontal>
            {this.renderCatogory()}
          </ScrollView>
          <Image
            style={{ width: width, height: 50 }}
            resizeMode="contain"
            source={{ uri: advertesPicture['PICTURE_ADDRESS'] }}
          />
          <View>
            <Floor title="休闲食品" floors={floor1} />
          </View>
          <View>
            <Floor title="新鲜水果" floors={floor2} />
          </View>
          <View>
            <Floor title="营养奶品" floors={floor3} />
          </View>
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  findPage: {
    flex: 1,
  },
  navigatorTitle: {
    paddingTop: 30,
    width: '100%',
    height: 84,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'rgb(106, 146, 266)'
  },
  leftText: {
    color: '#fff'
  },
  textInput: {
    height: 40,
    width: width * 0.7,
    backgroundColor: '#fff',
    paddingLeft: 10,
    paddingRight: 10,
    borderRadius: 20
  },
  rightIcon: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  findScrollView: {
    backgroundColor: '#e8e8e8',
    width,
  },
  dotStyle: {
    // 圆点的样式
    bottom: 0
  },
  loopBox: {
    height: 160,
    backgroundColor: '#fff',
  },
  pageViewBox: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    height: '100%',
  },
  pageSwiperStyle: {
    width: '20%',
    height: 75,
    justifyContent: 'center',
    alignItems: 'center',
  },
  pageItemTitle: {
    fontSize: 12,
    color: 'gray',
    marginTop: 10
  },
  categoryScrollView: {
    marginTop: 10,
    flexDirection: 'row',
    height: 90,
    backgroundColor: '#fff',
  },
  categoryItem: {
    width: width / 4,
    alignItems: 'center',
    justifyContent: 'center'
  },
  categoryItemTitle: {
    fontSize: 12,
    marginTop:10,
    color: 'gray',
  },
 
})
